<template>
    <div id="detail-model">
        <el-dialog
            :title="$t('g71jiC5CysyM0QhW1siYu')"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <el-descriptions :column="2" size="large" border>
                <el-descriptions-item :label="$t('kZa1a1FjawHcjk4ZzDtSq')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_Name}}
                </el-descriptions-item>

                <el-descriptions-item :label="$t('sttJdZkZo_3Dwos4Idwy')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_ModelName}}
                </el-descriptions-item>
                
                <el-descriptions-item :label="$t('hzx0IkDb5Eb1ifM18XFjD')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    <el-tag size="small">{{item.n_Version}}</el-tag>
                </el-descriptions-item>
                
                <el-descriptions-item :label="$t('uDJY2uHey5cDkM2Yhp2w')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{item.v_Remark}}
                </el-descriptions-item>
            </el-descriptions>

            <el-table :data="item.binds" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                <el-table-column type="index" :label="$t('wmd4Ixon01TmSHk82nKh')" width="55" align="center" />
                <el-table-column :label="$t('rXtVe1bIgbzePg9vUeivm')"  align="center">
                    <template #default="scope">
                        <div class="bind-item">
                            <span style="color: #9c381a;"> {{ $t('ojQn74KdGzgOxii3boJ2X', [scope.row.v_AlgorithmName]) }} </span>
                            <span style="color: #67C23A;"> {{ $t('gwQuEeOrPe6HSgElBhG', [scope.row.v_AlgorithmLibName]) }} </span>
                            <span style="color: #777976;"> {{ $t('35ntV4EVkhi0exIxmTff', [scope.row.v_AlgorithmMethodName]) }} </span>
                            <span style="color: #777976;"> {{ $t('lOyiUzAkTjTyBu7y1lQz', [scope.row.v_AlgorithmTypeName]) }} </span>
                            <span style="color: #eb7718;"> {{ $t('fz5gODhuY08dfTrKhszYe', [scope.row.n_AlgorithmVersion]) }} </span>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="模型"  align="center">
                    <template #default="scope">
                        <div class="bind-item">
                            <span style="color: #9c381a;"> 【名称：{{scope.row.v_ModelName}}】 </span>
                            <span style="color: #eb7718;"> 【版本：{{scope.row.n_ModelVersion}}】 </span>
                        </div>
                    </template>
                </el-table-column> -->
                <el-table-column :label="$t('whSbVDpEh0EkJf1l56YzB')"  align="center">
                    <template #default="scope">
                        <div class="bind-item">
                            <span style="color: #9c381a;"> {{ $t('o5v8Pjv07m_9Gl7wtjbIi', [scope.row.v_DeviceName]) }} </span>
                            <span style="color: #67C23A;"> {{ $t('f9kbZn2Cyj3IfU6gKXw8t', [scope.row.v_DeviceCode]) }} </span>
                            <span style="color: #777976;" v-if="scope.row.n_DeviceType === 1"> {{ $t('wA0j5Ntgft37SvV4YZgW8', [scope.row.v_DeviceTypeName]) }} </span>
                            <span style="color: #777976;" v-else-if="scope.row.n_DeviceType === 2"> {{ $t('t3qbQu0OfH3T9AJy3SqVl', [scope.row.v_DeviceTypeName]) }} </span>
                            <span style="color: #777976;" v-else-if="scope.row.n_DeviceType === 3"> {{ $t('l19mvqSnj5AdkTLi6nboI', [scope.row.v_DeviceTypeName]) }} </span>
                            <span style="color: #777976;" v-else> {{ $t('aDx1n42HyqKgY1W1NmNn') }} </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('rQ5NRdsIr9n8f_8WvQuu')" align="center" width="80px" >
                    <template #default="scope">
                        <el-button @click="unbind(scope.row.n_Id)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> {{ $t('otNHgU7iuSzQRSdKyx') }} </el-button>
                        
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click="handleClose">{{ $t('ml5D22SPhF8B3thSuLopc') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { ElButton, ElDialog, ElDescriptions, ElDescriptionsItem, ElMessageBox, ElMessage } from 'element-plus'
import { GetDetailWithBind } from '/@/api/its/model'
import { Delete as DeleteBind } from '/@/api/its/algorithm-model-device-bind'
import { ItemType } from '/@/types/its/ItsType'

export default defineComponent( {
    name: 'detail-model',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
        item: {
            type: Object as () => ItemType,
            default: null,
        }
    },
    setup(props,ctx){

        const loading = ref(false)
        const item:any = ref({})
        
        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        //获取详情
        const getDetail = async () => {
            try {
                loading.value = true
                let res = await GetDetailWithBind({id: props.item.n_Id})
                if (res && res.data) {
                    item.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }finally {
                loading.value = false
            }
        }

        //解绑
        const unbind = async (val: Number) => {
            ElMessageBox.confirm(window.$t('iwrXtSk3No5isvlfV2sb'),window.$t('dnBj3ZylirLoG1EzFe'),
                {
                    confirmButtonText: window.$t('ljWCcNnwiuLtut076mHBn'),
                    cancelButtonText: window.$t('bg0dCh9NzdUyGoIvsnNRl'),
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {n_Id : val}
                try {
                    let res: any = await DeleteBind(param)
                    if(res.success){
                        await getDetail()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: window.$t('vQ8dZlSpCyBiQYnRQJky'),
                })
            })
        }
        onMounted(async () => {
            await getDetail()
        })

        return {
            handleClose,
            loading,
            item,
            unbind
        }
    },
} )
</script>
<style scoped lang="scss">
#detail-model{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
    .bind-item {
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }
}
</style>